<template>
  <div id="login">
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="options"
    />

    <div class="login-form" v-loading="loading" element-loading-background="rgba(122, 122, 122,0)">
      <div class="title-container">
        <h3 class="title">智慧气体管理平台</h3>
      </div>
      <el-form ref="ruleFormRef" status-icon :model="ruleForm" class="demo-ruleForm">
        <el-form-item
          prop="username"
          :rules="[
            { required: true, message: '用户名是必填' },
            {
              min: 2,
              max: 20,
              message: '长度应在 2 到 20 个字符',
              trigger: 'blur',
            },
          ]"
        >
          <el-input v-model="ruleForm.username" autocomplete="off" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码" />
        </el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">登 录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onUnmounted } from 'vue'
import Device from '../utils/api.js'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import { loadFull } from 'tsparticles'
import { saveTokens, removeToken } from '../utils/token'
import { useRouter } from 'vue-router'
import Warn from '@/utils/warn'

const ruleFormRef = ref()
const router = useRouter()
const loading = ref(false)
const ruleForm = reactive({
  username: '',
  password: '',
})

const submitForm = formEl => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (valid) {
      try {
        loading.value = true
        let res = await Device.postLogin(ruleForm)
        saveTokens(res.access_token, res.refresh_token)
        if (res.access_token) {
          try {
            let USERDATA = await Warn.getInfo()
            localStorage.setItem('USERDATA', JSON.stringify(USERDATA))
            router.push({ path: '/about' })
          } catch (e) {
            removeToken()
            ElMessage({
              showClose: true,
              message: '登录失败，请重试',
              type: 'error',
            })
          }
        }
      } catch (error) {
        loading.value = false
        console.log(error, 'error')
      }
    } else {
      return false
    }
  })
}

onUnmounted(() => {
  ElMessage({
    showClose: true,
    message: '登录成功',
    type: 'success',
  })
})

// 动画效果
const particlesInit = async engine => {
  await loadFull(engine)
}
const particlesLoaded = async container => {
  console.log('Particles container loaded', container)
}
const options = ref({
  fpsLimit: 60,
  particles: {
    move: {
      bounce: false,
      direction: 'none',
      enable: true,
      outModes: 'out',
      random: false,
      speed: 2,
      straight: false,
    },
    number: { density: { enable: true, area: 800 }, value: 80 },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: 'circle',
    },
    size: {
      value: { min: 1, max: 5 },
    },
  },
  themes: [
    {
      name: 'light',
      default: {
        value: true,
        mode: 'light',
      },
      options: {
        background: {
          color: '#000',
        },
        particles: {
          color: {
            value: '#ccc',
          },
        },
      },
    },
    {
      name: 'dark',
      default: {
        value: true,
        mode: 'dark',
      },
      options: {
        background: {
          color: '#000',
        },
        particles: {
          color: {
            value: '#fff',
          },
        },
      },
    },
  ],
})
</script>
<style scoped lang="scss">
#login {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
:deep(.el-input) {
  input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    // padding: 12px 5px 12px 15px;
    color: #fff;
    height: 47px;
    caret-color: #fff;

    &:-webkit-autofill {
      border-radius: 4px;
      background: transparent;

      box-shadow: 0 0 0px 1000px #000 inset !important;
      -webkit-text-fill-color: #09e1fa !important;
    }
  }
}

// :deep( .el-form-item {
//   border: 1px solid #fff;
//   background: rgba(0, 0, 0, 0.3);
//   border-radius: 5px;
//   color: #454545;
//   margin-bottom: 30px;
// }

:deep(.el-form-item__error) {
  margin-left: 15px;
}

#login .login-form {
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  // width: 30%;
  transform: translate(-50%, -50%);
  // padding: 160px 35px 0;
  // margin: 0 auto;
  overflow: hidden;
  z-index: 999;

  .title-container {
    position: relative;

    .title {
      font-size: 50px;
      color: #fff;
      letter-spacing: 10px;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: 800;
    }
  }

  button {
    background-color: #000;
    // color: #09e1fa;
    color: #fff;
    margin: 20px;
    font-size: 16px;
    transition: 0.4s;
    border-color: #fff;
    // border-radius: 24px;
    // border-style: none;
    // box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px,
    //   rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
    // box-sizing: border-box;
    // color: #3c4043;
    // font-size: 14px;
    // font-weight: 500;
    // font-family: inherit;
    // letter-spacing: 0.25px;
    // line-height: normal;
    // padding: 11px 24px;
    // transition: background box-shadow 280ms ease;
  }

  button:hover {
    // background: #30e2e2;
    // color: #174ea6;
    background: #03e9f4;
    color: #fff;
    border-color: #03e9f4;
    border-radius: 5px;
    box-shadow: 0px 0px 18px 5px #03e9f4;
  }

  button:active {
    box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
    outline: none;
    //  border: 2px solid #4285f4;
  }
}

:deep(.el-input__wrapper) {
  background: none !important;
}
</style>
